import { useMount, useArray } from "./utils";
import React from "react";

export const TsReactTest = () => {
  const persons:{ name: string; age: number}[] = [
    {name: "jack", age: 25},
    {name: "karina", age: 23}
  ]
  const {value, clear, removeIndex, add} = useArray(persons);
  useMount(() => {
    // 期待报错：Property 'noExist' does not exist on type '{name: "john", age: 22}'
    // console.log(value.noExist);

    // 期待报错：Property 'age' is missing in type '{name: "john"}' but required in type
    // add({name: "david"})
    
    // 期待报错：Argument of type 'string' is not assignable to parameter of type 'number'
    // removeIndex("123")
  });
  return (
    <div>
      <button onClick={() => add({name: "john", age: 22})}>add john</button>
      <button onClick={() => removeIndex(0)}>remove 0</button>
      <button style={{marginBottom: '50px'}} onClick={() => clear()}>clear</button>
      {
        value.map((person:{age:number,name:string}, index:number) => (
          <div style={{marginBottom: '30px'}}>
            <span style={{color: 'red'}}>{index}</span>
            <span>{person.name}</span>
            <span>{person.age}</span>
          </div>
        ))
      }
    </div>
  )
}